<template>
  <div>
    <ul :class="styles['nav-ul']" :style="getUlStyle">
      <li v-for="world in worlds">
        <a :href="world.url" :style="{'font-weight':fontWeight,color:color,...world.style}">
          {{world.label}}
        </a>
      </li>
    </ul>
  </div>
</template>

<script>
  import {HOT_WORLD} from '@util/constant'
  import styles from './nav-items.scss'

  export default {
    name: "NavItems",
    model: {},
    props: {
      width: {
        type: String,
        // default: '550px'
        required: true
      },
      height: {
        type: String,
        // default: '20px'
      },
      color: {
        type: String,
        default: 'black'
      },
      worlds: {
        type: Array,
        default: function () {
          return HOT_WORLD
        }
      },
      fontSize: {
        type: String,
        default: '12px'
      },
      fontWeight: {
        type: Number,
        default: 300
      }
    },
    data() {
      return {
        styles
      }
    },
    computed: {
      getUlStyle: function () {
        return {width: this.width, height: this.height, ['font-size']: this.fontSize}
      }
    },
    beforeCreate: function () {

    },
    created: function () {

    },
    beforeMount: function () {

    },
    mounted: function () {

    },
    updated: function () {

    },
    activated: function () {

    },
    deactivated: function () {

    },
    beforeDestroy: function () {

    },
    destroyed: function () {

    },
    methods: {}
  }
</script>
